<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="修改营业时间"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <view class="settings-card">
        <!-- 营业日设置 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">营业日</text>
            <view class="radio-group">
              <view
                class="radio-item"
                :class="{ active: businessDayType === 'daily' }"
                @click="businessDayType = 'daily'"
              >
                <view class="radio-circle">
                  <view
                    v-if="businessDayType === 'daily'"
                    class="radio-dot"
                  ></view>
                </view>
                <text>每日营业</text>
              </view>
              <view
                class="radio-item"
                :class="{ active: businessDayType === 'custom' }"
                @click="businessDayType = 'custom'"
              >
                <view class="radio-circle">
                  <view
                    v-if="businessDayType === 'custom'"
                    class="radio-dot"
                  ></view>
                </view>
                <text>选择营业日</text>
              </view>
            </view>
          </view>

          <!-- 选择营业日 -->
          <view v-if="businessDayType === 'custom'" class="week-selector">
            <view
              v-for="(day, index) in weekDays"
              :key="index"
              class="week-item"
              :class="{ active: day.selected }"
              @click="toggleWeekDay(index)"
            >
              <text>{{ day.name }}</text>
              <view v-if="day.selected" class="check-icon">
                <uni-icons
                  type="checkmarkempty"
                  size="20"
                  color="#fff"
                ></uni-icons>
              </view>
            </view>
          </view>
        </view>

        <!-- 营业时间段设置 -->
        <view class="section">
          <view class="section-header">
            <text class="section-title">营业时间段</text>
            <view class="radio-group">
              <view
                class="radio-item"
                :class="{ active: timeType === 'allDay' }"
                @click="timeType = 'allDay'"
              >
                <view class="radio-circle">
                  <view v-if="timeType === 'allDay'" class="radio-dot"></view>
                </view>
                <text>全天</text>
              </view>
              <view
                class="radio-item"
                :class="{ active: timeType === 'custom' }"
                @click="timeType = 'custom'"
              >
                <view class="radio-circle">
                  <view v-if="timeType === 'custom'" class="radio-dot"></view>
                </view>
                <text>选择时间段</text>
              </view>
              <view
                class="radio-item"
                :class="{ active: timeType === 'crossDay' }"
                @click="timeType = 'crossDay'"
              >
                <view class="radio-circle">
                  <view v-if="timeType === 'crossDay'" class="radio-dot"></view>
                </view>
                <text>跨日营业</text>
              </view>
            </view>
          </view>

          <view v-if="timeType === 'custom'" class="time-tip">
            最多可添加3段
          </view>

          <!-- 时间段列表 -->
          <view v-if="timeType !== 'allDay'" class="time-slots">
            <view
              v-for="(slot, index) in timeSlots"
              :key="index"
              class="time-slot-item"
            >
              <view class="time-inputs">
                <view class="time-input" @click="selectTime(index, 'start')">
                  <text>{{ slot.start || "选择时间段" }}</text>
                </view>
                <text class="time-separator">至</text>
                <view class="time-input" @click="selectTime(index, 'end')">
                  <text>{{ slot.end || "选择时间段" }}</text>
                </view>
                <uni-icons
                  v-if="timeSlots.length > 1"
                  type="trash"
                  size="20"
                  color="#999"
                  @click="removeTimeSlot(index)"
                ></uni-icons>
              </view>

              <view v-if="timeType === 'crossDay'" class="next-day-option">
                <text class="option-label">至次日</text>
                <view class="radio-circle" @click="toggleNextDay(index)">
                  <view v-if="slot.nextDay" class="radio-dot"></view>
                </view>
              </view>
            </view>

            <!-- 新增时间段按钮 -->
            <view
              v-if="timeSlots.length < 3"
              class="add-time-slot"
              @click="addTimeSlot"
            >
              <text>+ 新增时间段</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 确认修改按钮 -->
      <view class="submit-btn" @click="handleSubmit">
        <text>确认修改</text>
      </view>
    </view>

    <!-- 时间选择弹框（组件） -->
    <TimePicker ref="timePickerRef" @confirm="onTimeConfirm" />
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import TimePicker from "./components/TimePicker.vue";

// 营业日类型
const businessDayType = ref("daily"); // daily: 每日营业, custom: 选择营业日

// 星期选择
const weekDays = ref([
  { name: "周一", selected: true },
  { name: "周二", selected: true },
  { name: "周三", selected: true },
  { name: "周四", selected: true },
  { name: "周五", selected: true },
  { name: "周六", selected: true },
  { name: "周日", selected: true },
]);

// 营业时间类型
const timeType = ref("allDay"); // allDay: 全天, custom: 选择时间段, crossDay: 跨日营业

// 时间段列表
const timeSlots = ref([{ start: "", end: "", nextDay: false }]);

// 时间选择器引用
const timePickerRef = ref(null);

// 当前选择的时间段
const currentSlotIndex = ref(0);
const currentTimeType = ref("start"); // start or end

// 监听时间类型变化，切换时重置时间段
watch(timeType, (newType, oldType) => {
  if (newType !== oldType) {
    timeSlots.value = [{ start: "", end: "", nextDay: false }];
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 切换星期
const toggleWeekDay = (index) => {
  weekDays.value[index].selected = !weekDays.value[index].selected;
};

// 切换至次日
const toggleNextDay = (index) => {
  timeSlots.value[index].nextDay = !timeSlots.value[index].nextDay;
};

// 选择时间
const selectTime = (slotIndex, type) => {
  currentSlotIndex.value = slotIndex;
  currentTimeType.value = type;
  timePickerRef.value?.open();
};

// 时间选择确认回调
const onTimeConfirm = (timeStr) => {
  if (currentTimeType.value === "start") {
    timeSlots.value[currentSlotIndex.value].start = timeStr;
  } else {
    timeSlots.value[currentSlotIndex.value].end = timeStr;
  }
};

// 新增时间段
const addTimeSlot = () => {
  if (timeSlots.value.length >= 3) {
    uni.showToast({
      title: "最多添加3个时间段",
      icon: "none",
    });
    return;
  }

  timeSlots.value.push({ start: "", end: "", nextDay: false });
};

// 删除时间段
const removeTimeSlot = (index) => {
  if (timeSlots.value.length <= 1) {
    uni.showToast({
      title: "至少保留一个时间段",
      icon: "none",
    });
    return;
  }

  timeSlots.value.splice(index, 1);
};

// 提交
const handleSubmit = () => {
  // 验证
  if (businessDayType.value === "custom") {
    const hasSelected = weekDays.value.some((day) => day.selected);
    if (!hasSelected) {
      uni.showToast({
        title: "请至少选择一个营业日",
        icon: "none",
      });
      return;
    }
  }

  if (timeType.value !== "allDay") {
    const hasEmptyTime = timeSlots.value.some(
      (slot) => !slot.start || !slot.end
    );
    if (hasEmptyTime) {
      uni.showToast({
        title: "请完善所有时间段",
        icon: "none",
      });
      return;
    }
  }

  // TODO: 调用接口保存
  uni.showToast({
    title: "修改成功",
    icon: "none",
  });

  setTimeout(() => {
    goBack();
  }, 1500);
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
  padding-top: 20rpx;
  padding-bottom: 120rpx;
}

.settings-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

// 区块
.section {
  margin-bottom: 48rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

// 单选组
.radio-group {
  display: flex;
  gap: 32rpx;
  flex-wrap: wrap;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }

  text {
    font-size: 28rpx;
    color: #666;
  }

  &.active text {
    color: #ff9500;
  }
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .radio-item.active & {
    border-color: #ff9500;
  }
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #ff9500;
  border-radius: 50%;
}

// 星期选择
.week-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.week-item {
  position: relative;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;

  &.active {
    background: #faa820;
    color: #fff;
  }

  &:active {
    opacity: 0.7;
  }
}

.check-icon {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 时间段提示
.time-tip {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 24rpx;
}

// 时间段列表
.time-slots {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.time-slot-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.time-inputs {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.time-input {
  flex: 1;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;

  text {
    color: #999;
  }

  &:active {
    opacity: 0.8;
  }
}

.time-separator {
  font-size: 28rpx;
  color: #666;
}

.next-day-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
}

.option-label {
  font-size: 28rpx;
  color: #333;
}

// 新增时间段按钮
.add-time-slot {
  padding: 24rpx;
  text-align: center;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;

  &:active {
    opacity: 0.7;
  }
}

// 确认按钮
.submit-btn {
  position: fixed;
  bottom: 32rpx;
  left: 32rpx;
  right: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #faa820;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 12rpx;

  &:active {
    opacity: 0.8;
  }
}
</style>
